<!DOCTYPE html>
<html lang="cn" dir="auto">

<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>Hello Hugo | 染竹君的个人博客</title>
<meta name="keywords" content="Hugo">
<meta name="description" content="Hugo 入门，以 PaperMod 主题为例进行基本配置，利用 Git 完成备份和部署工作。">
<meta name="author" content="SadBird">
<link rel="canonical" href="https://www.liyangjie.cn/posts/hobby/hello-hugo/">
<link crossorigin="anonymous" href="/assets/css/stylesheet.min.4b7d810bc0c98044b1c7a72962d55d7f125a07c3ed5cf31e670c3fdecc98b341.css" integrity="sha256-S32BC8DJgESxx6cpYtVdfxJaB8PtXPMeZww/3syYs0E=" rel="preload stylesheet" as="style">
<link rel="icon" href="https://www.liyangjie.cn/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.liyangjie.cn/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.liyangjie.cn/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://www.liyangjie.cn/favicon/apple-touch-icon.png">
<link rel="mask-icon" href="https://www.liyangjie.cn/favicon/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --hljs-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
<meta name="baidu-site-verification" content="code-9oLyeix0aK" />
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?4a41bf85d719f0e8c3165fc76904f546";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script async src="https://www.googletagmanager.com/gtag/js?id=G-C6GDZ56F4S"></script>
<script>
var doNotTrack = false;
if (!doNotTrack) {
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-C6GDZ56F4S', { 'anonymize_ip': false });
}
</script>
<meta property="og:title" content="Hello Hugo" />
<meta property="og:description" content="Hugo 入门，以 PaperMod 主题为例进行基本配置，利用 Git 完成备份和部署工作。" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.liyangjie.cn/posts/hobby/hello-hugo/" />
<meta property="og:image" content="https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-08-28T01:26:43&#43;08:00" />
<meta property="article:modified_time" content="2021-08-28T01:26:43&#43;08:00" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg" />
<meta name="twitter:title" content="Hello Hugo"/>
<meta name="twitter:description" content="Hugo 入门，以 PaperMod 主题为例进行基本配置，利用 Git 完成备份和部署工作。"/>


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position":  1 ,
      "name": "Posts",
      "item": "https://www.liyangjie.cn/posts/"
    }, 
    {
      "@type": "ListItem",
      "position":  2 ,
      "name": "Hobby",
      "item": "https://www.liyangjie.cn/posts/hobby/"
    }, 
    {
      "@type": "ListItem",
      "position":  3 ,
      "name": "Hello Hugo",
      "item": "https://www.liyangjie.cn/posts/hobby/hello-hugo/"
    }
  ]
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Hello Hugo",
  "name": "Hello Hugo",
  "description": "Hugo 入门，以 PaperMod 主题为例进行基本配置，利用 Git 完成备份和部署工作。",
  "keywords": [
    "Hugo"
  ],
  "articleBody": "以前自己折腾过各种平台的博客，WordPress、Hexo、Jekyll 等，但最终都没有坚持把自己的博客搭建完成，不是这里效果不好，自己折腾不出来，然后一怒之下就弃了，要么就是工作出差，回来后就忘了，总之放弃是件简单的事情。\n刚好处于工作真空期，想把一些平时学习的零碎内容整理一下，这次就坚持把这个博客完成了。这里就简单介绍下整个流程，及其中的一些坑和细节。篇幅较长，过程中可能有部分遗漏，轻喷。\n首先是这次使用的博客平台，选择 Hugo 的理由很简单，因为没用过它，觉得新鲜，但实际上使用流程和搭建过程其实和以前接触过的静态站点生成框架大同小异。个人电脑环境是 Win10，以前安装过 scoop，因此安装方法如下：\n1 2 3 4  scoop install hugo # 检查hubo是否安装完成 hugo version hugo v0.82.1-60618210 windows/amd64 BuildDate=2021-04-20T11:02:50Z VendorInfo=gohugoio   其他系统环境下安装方式见 官网。\n Hello Hugo 开始使用 Hugo 创建一个新站点 hello-hugo（这个名字各位自己决定，只要当前工作目录下不存在非空的重名子目录）:\n1  hugo new site hello-hugo   执行成功后，Hugo 会给出温馨的提示：\nhugo new site tip\r\rJust a few more steps and you’re ready to go:\n Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the “hugo new theme ” command. Perhaps you want to add some content. You can add single files with “hugo new .”. Start the built-in live server via “hugo server”.  \r\r 等会我们就按这个顺序完成站点的创建。先看看执行完 hugo new site 命令后，Hugo 为我们做了什么。\n工作目录内容 进入 hello-hugo 目录，Hugo 生成的内容如下图所示：\n\r\r这些大致作用如下：\n archetypes：存放博客的模板，默认提供了一个 default.md 作为所有博客的模板。 content：顾名思义，存放我们所有的博客正文。 data：存放一些数据，如 xml、json 等。 layouts：与博客页面布局相关的内容，如博客网页中的 header、footer 等。 static：存放静态资源，如图标、图片等。 themes：主题相关。 config.toml：站点、主题等相关内容的配置文件，它支持 yaml、toml 和 json 格式，后续将会一直和这个文件打交道。  除了上述几个目录之外，Hugo 还规定了许多其他目录用于提供不同的作用，如 assets、i18n 等。\n主题下载和使用 根据提示，要使用 Hugo，我们必须先下载 主题 （或自己创建主题），这里我选择自己比较喜欢的 PaperMod。\n先到 PaperMod Giuhub，根据官方文档的提示进行主题的下载。PaperMod 官方提供了 3 种下载方式，这里推荐第 2 种，以 git submodule 的方式下载。\n进入 hello-hugo 目录，分别执行如下命令：\n1 2 3 4 5  git init # 将hello-hugo初始化为git仓库 git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 # 将PaperMod作为hello-hugo依赖的submodule git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically) # 使用这种方式，以后主题更新也比较方便 git submodule update --remote --merge   完成后，会在 themes 目录下会多出一个 PaperMod 目录：\n\r\r可以发现，这个目录的结构与我们自己的 hello-hugo 目录十分相似，各目录的作用也基本一致。\n随后，为了使用这个主题，需要在 config.toml 中激活，为了保持和 PaperMod 一致，这里将这个文件的后缀修改为 .yml，在 config.yml 中配置如下：\n1 2 3 4  baseURL:\"https://example.org/\"languageCode:\"en-us\"title:\"Hello Hugo\"theme:\"PaperMod\"  这时候主题已经激活了，我们先往博客中添加一篇文章，首先创建名为 posts 的 section：\n1  hugo new section posts   完成后，在 content 目录下创建了一个名为 posts 的目录，这就是我们存放文章的目录。随后创建一篇文章：\n1 2  hugo new posts/HelloHugo1.md hugo new posts/HelloHugo2.md   进入 posts 目录，编辑两个 .md 文件，写点内容：\n1 2 3 4 5 6 7 8  --- title: \"HelloHugo1\" date: 2021-08-29T21:13:55+08:00 draft: false --- # Hello, Hugo1 你好，雨果   1 2 3 4 5 6 7 8  --- title: \"HelloHugo2\" date: 2021-08-29T21:18:38+08:00 draft: false --- # Hello, Hugo2 你好，雨果   文件头部为 Hugo 自动添加的内容，它来自 archetypes 目录中的 default.md 模板，注意 draft 属性，默认值为 true 表示文章处于草稿状态，该状态下的文档不会参与站点的生成，也就是说网站上没有草稿文章，所以此处需要将其先设置为 false。\n现在可以使用 Hugo 内置的 Server 预览一下成果（工作目录必须在 hugo-hello）：\n1  hugo server   \r\r😭 emmmmmmm，怎么说呢，有成果出来了，但是效果好像不太好，别急，接下来我们慢慢完善。\n 主题配置完善 基本上每个主题都会提供相应的 demo，PaperMod 的 demo 如下：\n\r\r我们现在就以它为目标进行改进。\n学习的最快方式就是模仿，所以我们直接到 demo 的 github（注意是PaperMod demo 的 github，而不是 PaperMod 的 github）上把 config.yml 抄过来。\n\r\r可以注意到前几行配置我们就新增了一条 paginate: 5，其他保持不变，从 enableInlineShortcodes 开始都是来自 demo 的配置。\nlanguages, archives, search 在 demo 的 languages 的配置段中，有 en、fr 和 fa 3 块，它们使用的主题 Mode 不同，且包含部分国际化的配置，我们暂时只需要使用 en，可以将 fr 和 fa 注释或者直接删除掉。\nen 下最重要的就是 menu 配置了，它表示了导航栏显示的内容，demo 中提供了最常用的 4 项，即 Archive、Search、Tags 及 Categories。每项中包含一个 weight，表示它们在导航栏中的显示顺序，越小越靠前。\n根据 PaperMod官方使用文档 的描述，要使用 Archive 和 Search，需要进行以下操作：\n  在 content 下增加 archives.md 文件，具体位置如下：\n1 2 3 4 5 6 7 8  . ├── config.yml ├── content/ │ ├── archives.md │ └── posts/ ├── static/ └── themes/ └── PaperMod/   archives.md 内容为：\n1 2 3 4 5 6  --- title: \"Archive\" layout: \"archives\" url: \"/archives/\" summary: archives ---     在 config.yml 中新增如下内容，demo 中已经配置好的，这步可以跳过：\n1 2 3 4 5  outputs:home:- HTML- RSS- JSON# is necessary  同样在 content 新增一个 search.md，内容如下：\n1 2 3 4 5 6 7  --- title: \"Search\" # in any language you want layout: \"search\" # is necessary # url: \"/archive\" # description: \"Description for Search\" summary: \"search\" ---     完成上述操作后，再看看效果：\n\r\r😏 像那么回事了吧！\nparams params 包括了 PaperMod 主题中的重要配置参数，下面举几个例子来进行说明，其他详细配置用法可以参照官方说明，也可以自己试试，大部分配置都是见名知意的。\n主题样式相关   defaultTheme：设置白色主题或者黑色主题，设置为 auto 则表示跟随浏览器。\n  disableThemeToggle:：是否允许白色主题和黑色主题进行手动切换，设置成 true 则在网页顶部提供切换按钮。\n  homeInfoParams、socialIcons：这两参数配置的首页显示的内容，修改内容如下：\n1 2 3 4 5 6 7 8 9 10 11 12  homeInfoParams:Title:\"Hello Hugo\"Content:Lorem ipsum dolor sit amet, consectetuer adipiscing elit, - sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.socialIcons:- name:githuburl:\"https://github.com/adityatelange/hugo-PaperMod\"- name:telegramurl:\"https://ko-fi.com/adityatelange\"- name:RsSurl:\"index.xml\"  结果如下：\n  \r\r关于 socialIcons 参数，PaperMod官网 给出了具体的参照表。\n  网站图标相关参数如下，可以指定网络路径或本地路径：\n1 2 3 4 5 6  assets:favicon:\"\"favicon16x16:\"\"favicon32x32:\"\"apple_touch_icon:\"\"safari_pinned_tab:\"\"    博客内容相关   ShowShareButtons 是否显示分享博客按钮，具体按钮的设定仍可参照 PaperMod官网。\n\r\r  ShowReadingTime 是否显示文章阅读时间。\n  ShowBreadCrumbs 是否显示面包屑。\n\r\r  ShowCodeCopyButtons 是否显示代码复制按钮。\n  ShowToc 是否显示文章目录。\n  博客封面相关：\n1 2 3 4 5  cover:responsiveImages:false# 仅仅用在Page Bundle情况下，此处不讨论hidden:false# hide everywhere but not in structured data 是否在下面两种情况下显示hiddenInList:false# hide on list pages and home 是否在列表视图中显示hiddenInSingle:false# hide on single page 是否在单页视图中显示  为了测试，我将后面 3 个配置项全部设置为 true，并在两篇测试博客中修改 front matter（就是博客最上方的数据）：\n1 2 3 4 5 6 7 8 9  --- title: \"HelloHugo1\" date: 2021-08-29T21:13:55+08:00 draft: cover: image: \"https://i.loli.net/2021/09/26/wBJrVXF9cefvtLZ.jpg\" alt: \"替换文本\" caption: \"封面标题\" ---   1 2 3 4 5 6 7 8 9  --- title: \"HelloHugo2\" date: 2021-08-29T21:18:38+08:00 draft: cover: image: \"https://i.loli.net/2021/09/26/pi3RYQSP12cJmWo.jpg\" alt: \"替换文本\" caption: \"封面标题\" ---   再来看看结果，是不是有点味道了：\n\r\r\r\r  分类相关 默认情况下，Hugo 支持 categories、tags 两个级别的分类，通过配置新增更多的分类：\n1 2 3 4  taxonomies:category:categoriestag:tagsseries:series  这里又配置了一个 series 的分类维度，可以在博客的 front matter 中使用：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15  --- title: \"HelloHugo1\" date: 2021-08-29T21:13:55+08:00 draft: cover: image: \"https://i.loli.net/2021/09/26/wBJrVXF9cefvtLZ.jpg\" alt: \"替换文本\" caption: \"封面标题\" categories: - Hugo tags: - Hugo series: - Hugo ---   这时候再进入网站的 Tags 导航项，就可以看到我们的标签和数量了：\n\r\r代码样式相关 PaperMod 配置代码显示样式如下，这里是我个人使用的配置：\n1 2 3 4 5 6 7 8 9 10 11  markup:goldmark:renderer:unsafe:truehighlight:# anchorLineNos: truecodeFences:trueguessSyntax:truelineNos:true# noClasses: falsestyle:monokai  将 lineNos 设置为 true 后，会产生 bug，官方提供了解决方案：\n在 hugo-hello，即工作目录下创建 assets/css/custom.css 文件，在文件中添加如下内容即可：\n1 2 3  .chroma { background-color: unset; }   现在往第一篇博客中添加一个代码段如下：\n1 2 3 4 5  ```java public V put(K key, V value) { return putVal(hash(key), key, value, false, true); } ```   显示效果如图：\n\r\r增加评论区 Valine 已经停止更新维护，因此将评论区功能换到了 Twikoo，官方文档非常详尽，各种方式的安装和配置都有，可直接前往查阅。\n如果仍要使用 Valine，前置工作需要在 LeanCloud 上注册并创建应用，获取到相关的 AppID 和 AppKey，具体流程请参照 Valine官方网站。\n获取到这两个参数后，根据 PaperMod 官方文档的指示，创建 layouts/partials/comments.html 文件，partials 路径不存在就自己创建，在文件中添加以下内容：\n1 2 3 4 5 6 7 8 9 10 11  {{ $valinejs := resources.Get \"js/Valine.min.js\" }} script src='{{ $valinejs.RelPermalink }}'script div id=\"vcomments\"div script new Valine({ el: '#vcomments', appId: '这里是你的AppID', appKey: '这里是你的AppKey', placeholder: '来都来了，说两句~' }) script   随后创建 assets/js/Valine.min.js，将 CDN 中的内容全部拷贝到该文件中，保存。\n在 config.yml 配置文件中设置评论开启即可，直接查找 comments 就可以定位到该配置的位置了，默认是关闭状态：\n1  comments:true  最后来看看效果：\n\r\r配置入门大致就先讲到这里，下面简单介绍下我的站点部署方式。\n 部署相关 Hugo 与 Hexo 类似，提供了直接部署为 Github Pages 的方式，比较简单，请直接移步到 官网。\n个人使用的最新部署方案已经单独在另一篇博客中进行详细介绍，以 GitHub 作为代码托管平台，使用 GitHub Action 完成部署。\n如果打算将博客源码仓库放在自己的服务器上，还是可以采用下面的方案，同时也包含了 nginx 的简单配置。\n准备工作 以前使用 Hexo 的时候在自己的云主机上进行了部署，当时域名整了好久（国内域名，需要备案），等域名搞定，黄花菜都凉了，所以这次刚好手头还保留着一台云主机，域名也一直在续费，就借此机会再折腾折腾。这个方案也是以前在别处看过的，具体出处已经找不到了，内容仅供参考。\n软件环境准备  云主机的操作系统为 Debian 4.19.37-5+deb10u2 (2019-08-08) x86_64 GNU/Linux，其他发行版也都可以。 静态资源服务器 nginx/1.20.1。 git/2.27.0。  域名、证书准备  准备好一个域名，并 DNS 解析至云服务器，国内需要走备案审批流程，国外域名则不需要，大家自行斟酌。 证书可选择各平台免费的 DV 证书，这里我随便找了一个腾讯云的 SSL 证书，品牌为 TrustAsia，有效期一年。  git 仓库及钩子 准备充分后，先在服务器上新建一个名为 git 的用户专门用于 git 同步：\n1  sudo adduser git   为了安全，修改分配给该用户的 shell 环境，编辑 /etc/passwd 文件，在末尾可以找到我们新增的 git 用户，修改后效果如下：\n1 2 3  ... ... # 修改前为 git❌1001:1001:,,,:/home/git:/bin/bash git❌1001:1001:,,,:/home/git:/usr/bin/git-shell   在自己的 客户端(Win10) 准备好 SSH 公钥，具体流程可以参照 Github教程。完成后，将公钥拷贝至服务器 /home/git/.ssh/authorized_keys 文件里，该文件中若有其他公钥，则在末尾换行后添加即可。\n在适当目录创建 hugo 的裸仓库：\n1  git init --bare hello-hugo.git   将该目录授权给刚创建好的 git 用户\n1  sudo chown -R git:git hello-hugo.git   现在服务端的 git 仓库已经完成了，我们回到客户端。\n进入 hello-hugo 目录，执行 git 初始化命令，将当前目录作为版本管理仓库：\n1  git init   然后将当前目录及其子目录下的所有文件纳入版本管理，并提交到 git 本地仓库：\n1 2  git add . git commit -m \"Hello, hugo\"   将当前仓库关联到我们上面创建好的远程仓库，由于已经配置了 SSH 公钥，可以使用 SSH 协议：\n1 2  git remote add origin ssh://git@your.domain:port/path/to/hello-hugo.git git push --set-upstream origin master   远程仓库地址中的 git 为我们上面在服务器上创建的用户，your.domai 表示你自己的域名，port 为服务端的 SSH 端口，默认 22 可以不写，但是不为 22 的时候一定要使用如上的完整路径，此时 ssh:// 不可省略。\n我们已经完成了远程仓库和本地仓库的上下游关系关联。\n为了方便每次提交文件后将静态目录自动部署到 nginx，选择用 git hook 在 post-receive 阶段将仓库中的 /public 整体移动到 nginx 指定路径。\n再切回到服务端，进入 hello-hugo.git 目录，可以看到该目录下有个 hooks 目录，里面存放的就是 git 支持的所有钩子，git 官方在里面已经放了很多 .sample 结尾的示例，我们只选择使用 post-receive 钩子。创建 post-receive 文件，并使用 vim 进行修改，修改内容如下：\n1 2  #!/bin/bash git --work-tree=/usr/share/nginx/hello-hugo --git-dir=/path/to/hello-hugo.git checkout -f   其中 --work-tree 为 nginx 中要配置的静态资源路径，请确保对于这个路径，我们上面创建的 git 用户需要有写入权限，具体命令参照上面的 hello-hugo.git 配置；--git-dir 就是服务端的 hello-hugo.git 仓库路径。\n在 客户端 我们新建一篇名为 HelloHugo3.md 的博客，记得把 draft 设置为 false，然后往里面加点内容。同样在 客户端 进入 hello-hugo 目录，执行 hugo 命令，该命令的作用是将所有的资源生成为静态站点，并将站点存放在 hello-hugo 的 public 目录下：\n1  hugo # 生成站点   再执行 git 操作：\n1 2 3  git add . git commit -m \"publish site\" git push # 这个客户端操作将会触发服务端执行post-receive脚本   一切正常的话，服务端的 /usr/share/nginx/hello-hugo 目录下将会和我们的客户端工作目录一致（空目录和 submodule 不会被 git 纳入版本控制，因此 data、static、themes 目录不会同步到服务器）。\nnginx 配置 上传 SSL 证书至 /etc/nginx/cert 目录下，nginx 使用的格式为：\n your.domain_bundle.crt your.domain.key  进入 nginx 配置目录 /etc/nginx/conf.d，新建 hello-hugo.conf 文件，内容如下，端口号和路径可以根据实际情况进行修改，保证没有被占用：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33  server { listen 443 ssl; # https端口号，默认为443，可以自己修改  server_name your.domain; # 域名，与申请证书时候使用的域名要一致  # https相关配置  ssl_certificate cert/your.domain_bundle.crt; ssl_certificate_key cert/your.domain.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; # 这个路径就是上面我们的git hook指定的路径，再接上一个public  root /usr/share/nginx/hello-hugo/public; # 默认查找路径下的index.html  location / { index index.html index.htm; } # 默认的404页面  error_page 404 /404.html; location = /40x.html { } } server { listen 80; # 端口号可以自己修改  server_name your.domain; # 域名，与申请证书时候使用的域名要一致  # 将http重定向到https，host后面的端口号与上一个server的端口号保持一致即可  return 301 https://$host:443$request_uri; }   最后，开启 nginx：\n1  nginx   客户端打开浏览器，输入你的域名（默认 80 端口可以不写，否则必须写），能够成功跳转到 https ，地址栏能够显示小锁（小锁表示网站使用的证书是安全的）就表示已经成功了：\n\r\r留个坑 至此，Hugo 从入门部署已经完成了，关于 Hugo 的使用细节没有覆盖到，主要是我自己也才刚开始使用，后续会慢慢积累和整理，争取把记录生活的习惯坚持下去，共勉 😎。\n",
  "wordCount" : "1210",
  "inLanguage": "cn",
  "image":"https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg","datePublished": "2021-08-28T01:26:43+08:00",
  "dateModified": "2021-08-28T01:26:43+08:00",
  "author":[{
    "@type": "Person",
    "name": "SadBird"
  }],
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.liyangjie.cn/posts/hobby/hello-hugo/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "染竹君的个人博客",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.liyangjie.cn/favicon/favicon.ico"
    }
  }
}
</script>
</head>

<body class="">
    <a id="top"></a>
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="https://www.liyangjie.cn/" accesskey="h" title="染竹君的小站 (Alt + H)">
                        
                    <img src="https://www.liyangjie.cn/img/logo_hue7837a3d2f79ccdd94da0537755daebc_15738_0x30_resize_box_3.png" alt="logo" aria-label="logo"
                        height="30">染竹君的小站</a>
            <span class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </span>
        </div>
        <ul id="menu">
            <li>
                <a href="https://www.liyangjie.cn/categories/" title="分类">
                    <span>分类</span>
                </a>
            </li>
            <li>
                <a href="https://www.liyangjie.cn/tags/" title="标签">
                    <span>标签</span>
                </a>
            </li>
            <li>
                <a href="https://www.liyangjie.cn/archives/" title="归档">
                    <span>归档</span>
                </a>
            </li>
            <li>
                <a href="https://www.liyangjie.cn/search/" title="搜索">
                    <span>搜索</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="https://www.liyangjie.cn/">Home</a>&nbsp;»&nbsp;<a href="https://www.liyangjie.cn/posts/">Posts</a>&nbsp;»&nbsp;<a href="https://www.liyangjie.cn/posts/hobby/">Hobby</a></div>
    <h1 class="post-title">
      Hello Hugo
    </h1>
    <div class="post-meta"><span title='2021-08-28 01:26:43 +0800 CST'>August 28, 2021</span>&nbsp;·&nbsp;6 min&nbsp;·&nbsp;SadBird&nbsp;|&nbsp;<a href="https://github.com/YazidLee/hugo-backup/tree/master/content/posts/hobby/HelloHugo.md" rel="noopener noreferrer" target="_blank">Suggest Changes</a>
</div>
  </header> <figure class="entry-cover"><img class="lazy" src="/svg/loading.min.svg"  data-src="https://d33wubrfki0l68.cloudfront.net/c38c7334cc3f23585738e40334284fddcaf03d5e/2e17c/images/hugo-logo-wide.svg" loading="lazy" alt="Hugo">
        
</figure><div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#hello-hugo" aria-label="Hello Hugo">Hello Hugo</a><ul>
                        
                <li>
                    <a href="#%e5%b7%a5%e4%bd%9c%e7%9b%ae%e5%bd%95%e5%86%85%e5%ae%b9" aria-label="工作目录内容">工作目录内容</a></li>
                <li>
                    <a href="#%e4%b8%bb%e9%a2%98%e4%b8%8b%e8%bd%bd%e5%92%8c%e4%bd%bf%e7%94%a8" aria-label="主题下载和使用">主题下载和使用</a></li></ul>
                </li>
                <li>
                    <a href="#%e4%b8%bb%e9%a2%98%e9%85%8d%e7%bd%ae%e5%ae%8c%e5%96%84" aria-label="主题配置完善">主题配置完善</a><ul>
                        
                <li>
                    <a href="#languages-archives-search" aria-label="languages, archives, search">languages, archives, search</a></li>
                <li>
                    <a href="#params" aria-label="params">params</a><ul>
                        
                <li>
                    <a href="#%e4%b8%bb%e9%a2%98%e6%a0%b7%e5%bc%8f%e7%9b%b8%e5%85%b3" aria-label="主题样式相关">主题样式相关</a></li>
                <li>
                    <a href="#%e5%8d%9a%e5%ae%a2%e5%86%85%e5%ae%b9%e7%9b%b8%e5%85%b3" aria-label="博客内容相关">博客内容相关</a></li></ul>
                </li>
                <li>
                    <a href="#%e5%88%86%e7%b1%bb%e7%9b%b8%e5%85%b3" aria-label="分类相关">分类相关</a></li>
                <li>
                    <a href="#%e4%bb%a3%e7%a0%81%e6%a0%b7%e5%bc%8f%e7%9b%b8%e5%85%b3" aria-label="代码样式相关">代码样式相关</a></li>
                <li>
                    <a href="#%e5%a2%9e%e5%8a%a0%e8%af%84%e8%ae%ba%e5%8c%ba" aria-label="增加评论区">增加评论区</a></li></ul>
                </li>
                <li>
                    <a href="#%e9%83%a8%e7%bd%b2%e7%9b%b8%e5%85%b3" aria-label="部署相关">部署相关</a><ul>
                        
                <li>
                    <a href="#%e5%87%86%e5%a4%87%e5%b7%a5%e4%bd%9c" aria-label="准备工作">准备工作</a><ul>
                        
                <li>
                    <a href="#%e8%bd%af%e4%bb%b6%e7%8e%af%e5%a2%83%e5%87%86%e5%a4%87" aria-label="软件环境准备">软件环境准备</a></li>
                <li>
                    <a href="#%e5%9f%9f%e5%90%8d%e8%af%81%e4%b9%a6%e5%87%86%e5%a4%87" aria-label="域名、证书准备">域名、证书准备</a></li></ul>
                </li>
                <li>
                    <a href="#git-%e4%bb%93%e5%ba%93%e5%8f%8a%e9%92%a9%e5%ad%90" aria-label="git 仓库及钩子">git 仓库及钩子</a></li>
                <li>
                    <a href="#nginx-%e9%85%8d%e7%bd%ae" aria-label="nginx 配置">nginx 配置</a></li></ul>
                </li>
                <li>
                    <a href="#%e7%95%99%e4%b8%aa%e5%9d%91" aria-label="留个坑">留个坑</a>
                </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><p>以前自己折腾过各种平台的博客，WordPress、Hexo、Jekyll  等，但最终都没有坚持把自己的博客搭建完成，不是这里效果不好，自己折腾不出来，然后一怒之下就弃了，要么就是工作出差，回来后就忘了，总之放弃是件简单的事情。</p>
<p>刚好处于工作真空期，想把一些平时学习的零碎内容整理一下，这次就坚持把这个博客完成了。这里就简单介绍下整个流程，及其中的一些坑和细节。篇幅较长，过程中可能有部分遗漏，轻喷。</p>
<p>首先是这次使用的博客平台，选择 <a href="https://gohugo.io/">Hugo</a> 的理由很简单，因为没用过它，觉得新鲜，但实际上使用流程和搭建过程其实和以前接触过的静态站点生成框架大同小异。个人电脑环境是 Win10，以前安装过 <code>scoop</code>，因此安装方法如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">scoop install hugo
</span></span><span class="line"><span class="cl"><span class="c1"># 检查hubo是否安装完成</span>
</span></span><span class="line"><span class="cl">hugo version
</span></span><span class="line"><span class="cl">hugo v0.82.1-60618210 windows/amd64 <span class="nv">BuildDate</span><span class="o">=</span>2021-04-20T11:02:50Z <span class="nv">VendorInfo</span><span class="o">=</span>gohugoio
</span></span></code></pre></td></tr></table>
</div>
</div><p>其他系统环境下安装方式见 <a href="https://gohugo.io/getting-started/installing/">官网</a>。</p>
<hr>
<h2 id="hello-hugo">Hello Hugo<a hidden class="anchor" aria-hidden="true" href="#hello-hugo">#</a></h2>
<p>开始使用 Hugo 创建一个新站点 <code>hello-hugo</code>（这个名字各位自己决定，只要当前工作目录下不存在非空的重名子目录）:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new site hello-hugo
</span></span></code></pre></td></tr></table>
</div>
</div><p>执行成功后，Hugo 会给出温馨的提示：</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>hugo new site tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p>Just a few more steps and you&rsquo;re ready to go:</p>
<ol>
<li>Download a theme into the same-named folder.<br/>
Choose a theme from <a href="https://themes.gohugo.io/">https://themes.gohugo.io/</a> or create your own with the &ldquo;hugo new theme <THEMENAME>&rdquo; command.</li>
<li>Perhaps you want to add some content. You can add single files with &ldquo;hugo new <SECTIONNAME><FILENAME>.<FORMAT>&rdquo;.</li>
<li>Start the built-in live server via &ldquo;hugo server&rdquo;.</li>
</ol>
</div>
        </div>
    </div>
<p>等会我们就按这个顺序完成站点的创建。先看看执行完 <code>hugo new site</code> 命令后，Hugo 为我们做了什么。</p>
<h3 id="工作目录内容">工作目录内容<a hidden class="anchor" aria-hidden="true" href="#工作目录内容">#</a></h3>
<p>进入 <code>hello-hugo</code> 目录，Hugo 生成的内容如下图所示：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png" title="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png" data-thumbnail="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png"
            alt="https://i.loli.net/2021/09/25/kINfz1TcXSOweRG.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>这些大致作用如下：</p>
<ul>
<li><code>archetypes</code>：存放博客的模板，默认提供了一个 <code>default.md</code> 作为所有博客的模板。</li>
<li><code>content</code>：顾名思义，存放我们所有的博客正文。</li>
<li><code>data</code>：存放一些数据，如 <code>xml</code>、<code>json</code> 等。</li>
<li><code>layouts</code>：与博客页面布局相关的内容，如博客网页中的 <code>header</code>、<code>footer</code> 等。</li>
<li><code>static</code>：存放静态资源，如图标、图片等。</li>
<li><code>themes</code>：主题相关。</li>
<li><code>config.toml</code>：站点、主题等相关内容的配置文件，它支持 <code>yaml</code>、<code>toml</code> 和 <code>json</code> 格式，后续将会一直和这个文件打交道。</li>
</ul>
<p>除了上述几个目录之外，Hugo 还规定了许多其他目录用于提供不同的作用，如 <code>assets</code>、<code>i18n</code> 等。</p>
<h3 id="主题下载和使用">主题下载和使用<a hidden class="anchor" aria-hidden="true" href="#主题下载和使用">#</a></h3>
<p>根据提示，要使用 Hugo，我们必须先下载 <a href="https://themes.gohugo.io/">主题</a> <del>（或自己创建主题）</del>，这里我选择自己比较喜欢的 <a href="https://themes.gohugo.io/themes/hugo-papermod/">PaperMod</a>。</p>
<p>先到 <a href="https://github.com/adityatelange/hugo-PaperMod">PaperMod Giuhub</a>，根据官方文档的提示进行主题的下载。PaperMod 官方提供了 3 种下载方式，这里推荐第 2 种，以 <code>git submodule</code> 的方式下载。</p>
<p>进入 <code>hello-hugo</code> 目录，分别执行如下命令：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git init <span class="c1"># 将hello-hugo初始化为git仓库</span>
</span></span><span class="line"><span class="cl">git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth<span class="o">=</span><span class="m">1</span> <span class="c1"># 将PaperMod作为hello-hugo依赖的submodule</span>
</span></span><span class="line"><span class="cl">git submodule update --init --recursive <span class="c1"># needed when you reclone your repo (submodules may not get cloned automatically)</span>
</span></span><span class="line"><span class="cl"><span class="c1"># 使用这种方式，以后主题更新也比较方便</span>
</span></span><span class="line"><span class="cl">git submodule update --remote --merge 
</span></span></code></pre></td></tr></table>
</div>
</div><p>完成后，会在 <code>themes</code> 目录下会多出一个 <code>PaperMod</code> 目录：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png" title="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png" data-thumbnail="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png"
            alt="https://i.loli.net/2021/09/25/36qkXZ8UFBHuLb4.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>可以发现，这个目录的结构与我们自己的 <code>hello-hugo</code> 目录十分相似，各目录的作用也基本一致。</p>
<p>随后，为了使用这个主题，需要在 <code>config.toml</code> 中激活，为了保持和 PaperMod 一致，这里将这个文件的后缀修改为 <code>.yml</code>，在 <code>config.yml</code> 中配置如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">baseURL</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://example.org/&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">languageCode</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;en-us&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Hello Hugo&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">theme</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;PaperMod&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>这时候主题已经激活了，我们先往博客中添加一篇文章，首先创建名为 <code>posts</code> 的 <code>section</code>：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new section posts
</span></span></code></pre></td></tr></table>
</div>
</div><p>完成后，在 <code>content</code> 目录下创建了一个名为 <code>posts</code> 的目录，这就是我们存放文章的目录。随后创建一篇文章：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo new posts/HelloHugo1.md
</span></span><span class="line"><span class="cl">hugo new posts/HelloHugo2.md
</span></span></code></pre></td></tr></table>
</div>
</div><p>进入 <code>posts</code> 目录，编辑两个 <code>.md</code> 文件，写点内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;HelloHugo1&#34;
</span></span><span class="line"><span class="cl">date: 2021-08-29T21:13:55+08:00
</span></span><span class="line"><span class="cl">draft: false
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="gh"># Hello, Hugo1
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>你好，雨果
</span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;HelloHugo2&#34;
</span></span><span class="line"><span class="cl">date: 2021-08-29T21:18:38+08:00
</span></span><span class="line"><span class="cl">draft: false
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="gh"># Hello, Hugo2
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>你好，雨果
</span></span></code></pre></td></tr></table>
</div>
</div><p>文件头部为 Hugo 自动添加的内容，它来自 <code>archetypes</code> 目录中的 <code>default.md</code> 模板，注意 <code>draft</code> 属性，默认值为 <code>true</code> 表示文章处于草稿状态，该状态下的文档不会参与站点的生成，也就是说网站上没有草稿文章，所以此处需要将其先设置为 <code>false</code>。</p>
<p>现在可以使用 Hugo 内置的 Server 预览一下成果（工作目录必须在 <code>hugo-hello</code>）：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo server
</span></span></code></pre></td></tr></table>
</div>
</div><p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png" title="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png" data-thumbnail="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png"
            alt="https://i.loli.net/2021/09/25/Fi2SjNc3DB65sPf.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>😭 emmmmmmm，怎么说呢，有成果出来了，但是效果好像不太好，别急，接下来我们慢慢完善。</p>
<hr>
<h2 id="主题配置完善">主题配置完善<a hidden class="anchor" aria-hidden="true" href="#主题配置完善">#</a></h2>
<p>基本上每个主题都会提供相应的 demo，PaperMod 的 <a href="https://adityatelange.github.io/hugo-PaperMod/">demo</a> 如下：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png" title="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png" data-thumbnail="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png"
            alt="https://i.loli.net/2021/09/25/SYBm6d2hvnpNPsl.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>我们现在就以它为目标进行改进。</p>
<p>学习的最快方式就是模仿，所以我们直接到 <a href="https://adityatelange.github.io/hugo-PaperMod/">demo</a> 的 github（注意是PaperMod demo 的 github，而不是 PaperMod 的 github）上把 <code>config.yml</code> 抄过来。</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png" title="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png" data-thumbnail="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png"
            alt="https://i.loli.net/2021/09/25/89J1xSA6d7kWutU.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>可以注意到前几行配置我们就新增了一条 <code>paginate: 5</code>，其他保持不变，从 <code>enableInlineShortcodes</code> 开始都是来自 demo 的配置。</p>
<h3 id="languages-archives-search">languages, archives, search<a hidden class="anchor" aria-hidden="true" href="#languages-archives-search">#</a></h3>
<p>在 demo 的 <code>languages</code> 的配置段中，有 <code>en</code>、<code>fr</code> 和 <code>fa</code> 3 块，它们使用的主题 Mode 不同，且包含部分国际化的配置，我们暂时只需要使用 <code>en</code>，可以将 <code>fr</code> 和 <code>fa</code> 注释或者直接删除掉。</p>
<p><code>en</code> 下最重要的就是 <code>menu</code> 配置了，它表示了导航栏显示的内容，demo 中提供了最常用的 4 项，即 <code>Archive</code>、<code>Search</code>、<code>Tags</code> 及 <code>Categories</code>。每项中包含一个 <code>weight</code>，表示它们在导航栏中的显示顺序，越小越靠前。</p>
<p>根据 <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/Features">PaperMod官方使用文档</a> 的描述，要使用 <code>Archive</code> 和 <code>Search</code>，需要进行以下操作：</p>
<ul>
<li>
<p>在 <code>content</code> 下增加 <code>archives.md</code> 文件，具体位置如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">.
</span></span><span class="line"><span class="cl">├── config.yml
</span></span><span class="line"><span class="cl">├── content/
</span></span><span class="line"><span class="cl">│   ├── archives.md   &lt;--- Create archive.md here
</span></span><span class="line"><span class="cl">│   └── posts/
</span></span><span class="line"><span class="cl">├── static/
</span></span><span class="line"><span class="cl">└── themes/
</span></span><span class="line"><span class="cl">    └── PaperMod/
</span></span></code></pre></td></tr></table>
</div>
</div><p><code>archives.md</code> 内容为：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;Archive&#34;
</span></span><span class="line"><span class="cl">layout: &#34;archives&#34;
</span></span><span class="line"><span class="cl">url: &#34;/archives/&#34;
</span></span><span class="line"><span class="cl">summary: archives
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></td></tr></table>
</div>
</div></li>
<li>
<p>在 <code>config.yml</code> 中新增如下内容，demo 中已经配置好的，这步可以跳过：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">outputs</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">home</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="l">HTML</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="l">RSS</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="l">JSON</span><span class="w"> </span><span class="c"># is necessary</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>同样在 <code>content</code> 新增一个 <code>search.md</code>，内容如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;Search&#34; # in any language you want
</span></span><span class="line"><span class="cl">layout: &#34;search&#34; # is necessary
</span></span><span class="line"><span class="cl"><span class="gh"># url: &#34;/archive&#34;
</span></span></span><span class="line"><span class="cl"><span class="gh"># description: &#34;Description for Search&#34;
</span></span></span><span class="line"><span class="cl"><span class="gh"></span>summary: &#34;search&#34;
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<p>完成上述操作后，再看看效果：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png" title="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png" data-thumbnail="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png"
            alt="https://i.loli.net/2021/09/25/gem9KWfEGqnp2sY.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>😏 像那么回事了吧！</p>
<h3 id="params">params<a hidden class="anchor" aria-hidden="true" href="#params">#</a></h3>
<p><code>params</code> 包括了 PaperMod 主题中的重要配置参数，下面举几个例子来进行说明，其他详细配置用法可以参照官方说明，也可以自己试试，大部分配置都是见名知意的。</p>
<h4 id="主题样式相关">主题样式相关<a hidden class="anchor" aria-hidden="true" href="#主题样式相关">#</a></h4>
<ul>
<li>
<p><code>defaultTheme</code>：设置白色主题或者黑色主题，设置为 <code>auto</code> 则表示跟随浏览器。</p>
</li>
<li>
<p><code>disableThemeToggle:</code>：是否允许白色主题和黑色主题进行手动切换，设置成 <code>true</code> 则在网页顶部提供切换按钮。</p>
</li>
<li>
<p><code>homeInfoParams</code>、<code>socialIcons</code>：这两参数配置的首页显示的内容，修改内容如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">homeInfoParams</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">Title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;Hello Hugo&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">Content</span><span class="p">:</span><span class="w"> </span><span class="p">&gt;</span><span class="sd">
</span></span></span><span class="line"><span class="cl"><span class="sd">            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
</span></span></span><span class="line"><span class="cl"><span class="sd">            - sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</span><span class="w">            
</span></span></span><span class="line"><span class="cl"><span class="w"></span><span class="nt">socialIcons</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">github</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://github.com/adityatelange/hugo-PaperMod&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">telegram</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;https://ko-fi.com/adityatelange&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">RsS</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">          </span><span class="nt">url</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;index.xml&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>结果如下：</p>
</li>
</ul>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png" title="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png" data-thumbnail="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png"
            alt="https://i.loli.net/2021/09/25/xpYU7TqcIyGVR6Z.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>关于 <code>socialIcons</code> 参数，<a href="https://github.com/adityatelange/hugo-PaperMod/wiki/Icons">PaperMod官网</a> 给出了具体的参照表。</p>
<ul>
<li>
<p>网站图标相关参数如下，可以指定网络路径或本地路径：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">assets</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / abs url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon16x16</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / abs url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">favicon32x32</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / abs url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">apple_touch_icon</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / abs url&gt;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">safari_pinned_tab</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&lt;link / abs url&gt;&#34;</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div></li>
</ul>
<h4 id="博客内容相关">博客内容相关<a hidden class="anchor" aria-hidden="true" href="#博客内容相关">#</a></h4>
<ul>
<li>
<p><code>ShowShareButtons</code> 是否显示分享博客按钮，具体按钮的设定仍可参照 <a href="https://github.com/adityatelange/hugo-PaperMod/wiki/Icons">PaperMod官网</a>。</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png" title="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png" data-thumbnail="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png"
            alt="https://i.loli.net/2021/09/25/LvTnSraM1fWI5zP.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
</li>
<li>
<p><code>ShowReadingTime</code> 是否显示文章阅读时间。</p>
</li>
<li>
<p><code>ShowBreadCrumbs</code> 是否显示面包屑。</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png" title="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png" data-thumbnail="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png"
            alt="https://i.loli.net/2021/09/25/BhbN3KgVlT2ZMyr.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
</li>
<li>
<p><code>ShowCodeCopyButtons</code> 是否显示代码复制按钮。</p>
</li>
<li>
<p><code>ShowToc</code> 是否显示文章目录。</p>
</li>
<li>
<p>博客封面相关：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">cover</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">responsiveImages</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c"># 仅仅用在Page Bundle情况下，此处不讨论</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">hidden</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c"># hide everywhere but not in structured data 是否在下面两种情况下显示</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">hiddenInList</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c"># hide on list pages and home 是否在列表视图中显示</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">hiddenInSingle</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="c"># hide on single page 是否在单页视图中显示</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>为了测试，我将后面 3 个配置项全部设置为 true，并在两篇测试博客中修改 front matter（就是博客最上方的数据）：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;HelloHugo1&#34;
</span></span><span class="line"><span class="cl">date: 2021-08-29T21:13:55+08:00
</span></span><span class="line"><span class="cl">draft: 
</span></span><span class="line"><span class="cl">cover:
</span></span><span class="line"><span class="cl">    image: &#34;https://i.loli.net/2021/09/26/wBJrVXF9cefvtLZ.jpg&#34;
</span></span><span class="line"><span class="cl">    alt: &#34;替换文本&#34;
</span></span><span class="line"><span class="cl">    caption: &#34;封面标题&#34;
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;HelloHugo2&#34;
</span></span><span class="line"><span class="cl">date: 2021-08-29T21:18:38+08:00
</span></span><span class="line"><span class="cl">draft: 
</span></span><span class="line"><span class="cl">cover:
</span></span><span class="line"><span class="cl">    image: &#34;https://i.loli.net/2021/09/26/pi3RYQSP12cJmWo.jpg&#34;
</span></span><span class="line"><span class="cl">    alt: &#34;替换文本&#34;
</span></span><span class="line"><span class="cl">    caption: &#34;封面标题&#34;
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></td></tr></table>
</div>
</div><p>再来看看结果，是不是有点味道了：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png" title="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png" data-thumbnail="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png"
            alt="https://i.loli.net/2021/09/25/r5o4qg8te1kYTVL.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png" title="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png" data-thumbnail="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png"
            alt="https://i.loli.net/2021/09/25/rWwZmkPN83AYS6i.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
</li>
</ul>
<h3 id="分类相关">分类相关<a hidden class="anchor" aria-hidden="true" href="#分类相关">#</a></h3>
<p>默认情况下，Hugo 支持 <code>categories</code>、<code>tags</code> 两个级别的分类，通过配置新增更多的分类：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">taxonomies</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">category</span><span class="p">:</span><span class="w"> </span><span class="l">categories</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">tag</span><span class="p">:</span><span class="w"> </span><span class="l">tags</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">series</span><span class="p">:</span><span class="w"> </span><span class="l">series</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>这里又配置了一个 <code>series</code> 的分类维度，可以在博客的 front matter 中使用：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;HelloHugo1&#34;
</span></span><span class="line"><span class="cl">date: 2021-08-29T21:13:55+08:00
</span></span><span class="line"><span class="cl">draft: 
</span></span><span class="line"><span class="cl">cover:
</span></span><span class="line"><span class="cl">    image: &#34;https://i.loli.net/2021/09/26/wBJrVXF9cefvtLZ.jpg&#34;
</span></span><span class="line"><span class="cl">    alt: &#34;替换文本&#34;
</span></span><span class="line"><span class="cl">    caption: &#34;封面标题&#34;
</span></span><span class="line"><span class="cl">categories:
</span></span><span class="line"><span class="cl">    <span class="k">-</span> Hugo
</span></span><span class="line"><span class="cl">tags:
</span></span><span class="line"><span class="cl">    <span class="k">-</span> Hugo
</span></span><span class="line"><span class="cl">series:
</span></span><span class="line"><span class="cl">    <span class="k">-</span> Hugo
</span></span><span class="line"><span class="cl">---
</span></span></code></pre></td></tr></table>
</div>
</div><p>这时候再进入网站的 <code>Tags</code> 导航项，就可以看到我们的标签和数量了：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png" title="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png" data-thumbnail="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png"
            alt="https://i.loli.net/2021/09/25/yInRS3oc9KWQrBs.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<h3 id="代码样式相关">代码样式相关<a hidden class="anchor" aria-hidden="true" href="#代码样式相关">#</a></h3>
<p>PaperMod 配置代码显示样式如下，这里是我个人使用的配置：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">markup</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">goldmark</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">renderer</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">            </span><span class="nt">unsafe</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">highlight</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="c"># anchorLineNos: true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">codeFences</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">guessSyntax</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">lineNos</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="c"># noClasses: false</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">        </span><span class="nt">style</span><span class="p">:</span><span class="w"> </span><span class="l">monokai</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>将 <code>lineNos</code> 设置为 true 后，会产生 bug，官方提供了解决方案：</p>
<p>在 <code>hugo-hello</code>，即工作目录下创建 <code>assets/css/custom.css</code> 文件，在文件中添加如下内容即可：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">chroma</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">background-color</span><span class="p">:</span> <span class="kc">unset</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>现在往第一篇博客中添加一个代码段如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl"><span class="s">```java
</span></span></span><span class="line"><span class="cl"><span class="s"></span><span class="kd">public</span> <span class="n">V</span> <span class="nf">put</span><span class="o">(</span><span class="n">K</span> <span class="n">key</span><span class="o">,</span> <span class="n">V</span> <span class="n">value</span><span class="o">)</span> <span class="o">{</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="n">putVal</span><span class="o">(</span><span class="n">hash</span><span class="o">(</span><span class="n">key</span><span class="o">),</span> <span class="n">key</span><span class="o">,</span> <span class="n">value</span><span class="o">,</span> <span class="kc">false</span><span class="o">,</span> <span class="kc">true</span><span class="o">);</span>
</span></span><span class="line"><span class="cl"><span class="o">}</span>
</span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>显示效果如图：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png" title="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png" data-thumbnail="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png"
            alt="https://i.loli.net/2021/09/25/wF3muHqsGAncCz6.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<h3 id="增加评论区">增加评论区<a hidden class="anchor" aria-hidden="true" href="#增加评论区">#</a></h3>
<p><code>Valine</code> 已经停止更新维护，因此将评论区功能换到了 <code>Twikoo</code>，<a href="https://twikoo.js.org/">官方文档</a>非常详尽，各种方式的安装和配置都有，可直接前往查阅。</p>
<p>如果仍要使用 <code>Valine</code>，前置工作需要在 LeanCloud 上注册并创建应用，获取到相关的 <code>AppID</code> 和 <code>AppKey</code>，具体流程请参照  <a href="https://valine.js.org/quickstart.html">Valine官方网站</a>。</p>
<p>获取到这两个参数后，根据 PaperMod 官方文档的指示，创建 <code>layouts/partials/comments.html</code> 文件，<code>partials</code> 路径不存在就自己创建，在文件中添加以下内容：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl">{{ $valinejs := resources.Get &#34;js/Valine.min.js&#34; }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#39;{{ $valinejs.RelPermalink }}&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;vcomments&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    <span class="k">new</span> <span class="nx">Valine</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">      <span class="nx">el</span><span class="o">:</span> <span class="s1">&#39;#vcomments&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nx">appId</span><span class="o">:</span> <span class="s1">&#39;这里是你的AppID&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nx">appKey</span><span class="o">:</span> <span class="s1">&#39;这里是你的AppKey&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">      <span class="nx">placeholder</span><span class="o">:</span> <span class="s1">&#39;来都来了，说两句~&#39;</span>
</span></span><span class="line"><span class="cl">    <span class="p">})</span>
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>随后创建 <code>assets/js/Valine.min.js</code>，将 <a href="https://cdnjs.cloudflare.com/ajax/libs/valine/1.4.14/Valine.min.js">CDN</a> 中的内容全部拷贝到该文件中，保存。</p>
<p>在 <code>config.yml</code> 配置文件中设置评论开启即可，直接查找 <code>comments</code> 就可以定位到该配置的位置了，默认是关闭状态：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">comments</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span></span></span></code></pre></td></tr></table>
</div>
</div><p>最后来看看效果：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png" title="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png" data-thumbnail="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png"
            alt="https://i.loli.net/2021/09/25/Wkd3A7vbXstCG81.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<p>配置入门大致就先讲到这里，下面简单介绍下我的站点部署方式。</p>
<hr>
<h2 id="部署相关">部署相关<a hidden class="anchor" aria-hidden="true" href="#部署相关">#</a></h2>
<p>Hugo 与 Hexo 类似，提供了直接部署为 Github Pages 的方式，比较简单，请直接移步到 <a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">官网</a>。</p>
<p>个人使用的最新部署方案已经单独在<a href="https://www.liyangjie.cn/posts/hobby/hugo-git-actions/">另一篇博客</a>中进行详细介绍，以 GitHub 作为代码托管平台，使用 GitHub Action 完成部署。</p>
<p>如果打算将博客源码仓库放在自己的服务器上，还是可以采用下面的方案，同时也包含了 nginx 的简单配置。</p>
<h3 id="准备工作">准备工作<a hidden class="anchor" aria-hidden="true" href="#准备工作">#</a></h3>
<p>以前使用 Hexo 的时候在自己的云主机上进行了部署，当时域名整了好久（国内域名，需要备案），等域名搞定，黄花菜都凉了，所以这次刚好手头还保留着一台云主机，域名也一直在续费，就借此机会再折腾折腾。这个方案也是以前在别处看过的，具体出处已经找不到了，内容仅供参考。</p>
<h4 id="软件环境准备">软件环境准备<a hidden class="anchor" aria-hidden="true" href="#软件环境准备">#</a></h4>
<ul>
<li>云主机的操作系统为 <code>Debian 4.19.37-5+deb10u2 (2019-08-08) x86_64 GNU/Linux</code>，其他发行版也都可以。</li>
<li>静态资源服务器 <code>nginx/1.20.1</code>。</li>
<li><code>git/2.27.0</code>。</li>
</ul>
<h4 id="域名证书准备">域名、证书准备<a hidden class="anchor" aria-hidden="true" href="#域名证书准备">#</a></h4>
<ul>
<li>准备好一个域名，并 DNS 解析至云服务器，国内需要走备案审批流程，国外域名则不需要，大家自行斟酌。</li>
<li>证书可选择各平台免费的 DV 证书，这里我随便找了一个腾讯云的 SSL 证书，品牌为 <code>TrustAsia</code>，有效期一年。</li>
</ul>
<h3 id="git-仓库及钩子">git 仓库及钩子<a hidden class="anchor" aria-hidden="true" href="#git-仓库及钩子">#</a></h3>
<p>准备充分后，先在服务器上新建一个名为 git 的用户专门用于 git 同步：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo adduser git
</span></span></code></pre></td></tr></table>
</div>
</div><p>为了安全，修改分配给该用户的 shell 环境，编辑 <code>/etc/passwd</code> 文件，在末尾可以找到我们新增的 git 用户，修改后效果如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">... ...
</span></span><span class="line"><span class="cl"><span class="c1"># 修改前为 git❌1001:1001:,,,:/home/git:/bin/bash</span>
</span></span><span class="line"><span class="cl">git❌1001:1001:,,,:/home/git:/usr/bin/git-shell
</span></span></code></pre></td></tr></table>
</div>
</div><p>在自己的 <strong>客户端(Win10)</strong> 准备好 SSH 公钥，具体流程可以参照 <a href="https://docs.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent">Github教程</a>。完成后，将公钥拷贝至服务器 <code>/home/git/.ssh/authorized_keys</code> 文件里，该文件中若有其他公钥，则在末尾换行后添加即可。</p>
<p>在适当目录创建 hugo 的裸仓库：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git init --bare hello-hugo.git
</span></span></code></pre></td></tr></table>
</div>
</div><p>将该目录授权给刚创建好的 git 用户</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">sudo chown -R git:git hello-hugo.git
</span></span></code></pre></td></tr></table>
</div>
</div><p>现在服务端的 git 仓库已经完成了，我们回到客户端。</p>
<p>进入 <code>hello-hugo</code> 目录，执行 git 初始化命令，将当前目录作为版本管理仓库：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git init
</span></span></code></pre></td></tr></table>
</div>
</div><p>然后将当前目录及其子目录下的所有文件纳入版本管理，并提交到 git 本地仓库：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git add .
</span></span><span class="line"><span class="cl">git commit -m <span class="s2">&#34;Hello, hugo&#34;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>将当前仓库关联到我们上面创建好的远程仓库，由于已经配置了 SSH 公钥，可以使用 SSH 协议：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git remote add origin ssh://git@your.domain:port/path/to/hello-hugo.git
</span></span><span class="line"><span class="cl">git push --set-upstream origin master
</span></span></code></pre></td></tr></table>
</div>
</div><p>远程仓库地址中的 <code>git</code> 为我们上面在服务器上创建的用户，<code>your.domai</code> 表示你自己的域名，<code>port</code> 为服务端的 SSH 端口，默认 22 可以不写，但是不为 22 的时候一定要使用如上的完整路径，此时 <code>ssh://</code> 不可省略。</p>
<p>我们已经完成了远程仓库和本地仓库的上下游关系关联。</p>
<p>为了方便每次提交文件后将静态目录自动部署到 nginx，选择用 git hook 在 <code>post-receive</code> 阶段将仓库中的 <code>/public</code> 整体移动到 nginx 指定路径。</p>
<p>再切回到服务端，进入 <code>hello-hugo.git</code> 目录，可以看到该目录下有个 <code>hooks</code> 目录，里面存放的就是 git 支持的所有钩子，git 官方在里面已经放了很多 <code>.sample</code> 结尾的示例，我们只选择使用 <code>post-receive</code> 钩子。创建 <code>post-receive</code> 文件，并使用 vim 进行修改，修改内容如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl"><span class="cp">#!/bin/bash
</span></span></span><span class="line"><span class="cl"><span class="cp"></span>git --work-tree<span class="o">=</span>/usr/share/nginx/hello-hugo --git-dir<span class="o">=</span>/path/to/hello-hugo.git checkout -f
</span></span></code></pre></td></tr></table>
</div>
</div><p>其中 <code>--work-tree</code> 为 nginx 中要配置的静态资源路径，<strong>请确保对于这个路径，我们上面创建的 git 用户需要有写入权限</strong>，具体命令参照上面的 <code>hello-hugo.git</code> 配置；<code>--git-dir</code> 就是服务端的 <code>hello-hugo.git</code> 仓库路径。</p>
<p>在 <strong>客户端</strong> 我们新建一篇名为 <code>HelloHugo3.md</code> 的博客，记得把 <code>draft</code> 设置为 false，然后往里面加点内容。同样在 <strong>客户端</strong> 进入 <code>hello-hugo</code> 目录，执行 <code>hugo</code> 命令，该命令的作用是将所有的资源生成为静态站点，并将站点存放在 <code>hello-hugo</code> 的 <code>public</code> 目录下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">hugo <span class="c1"># 生成站点</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>再执行 git 操作：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git add .
</span></span><span class="line"><span class="cl">git commit -m <span class="s2">&#34;publish site&#34;</span>
</span></span><span class="line"><span class="cl">git push <span class="c1"># 这个客户端操作将会触发服务端执行post-receive脚本</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>一切正常的话，服务端的 <code>/usr/share/nginx/hello-hugo</code> 目录下将会和我们的客户端工作目录一致（空目录和 <code>submodule</code> 不会被 git 纳入版本控制，因此 <code>data</code>、<code>static</code>、<code>themes</code> 目录不会同步到服务器）。</p>
<h3 id="nginx-配置">nginx 配置<a hidden class="anchor" aria-hidden="true" href="#nginx-配置">#</a></h3>
<p>上传 SSL 证书至 <code>/etc/nginx/cert</code> 目录下，nginx 使用的格式为：</p>
<ul>
<li><code>your.domain_bundle.crt</code></li>
<li><code>your.domain.key</code></li>
</ul>
<p>进入 nginx 配置目录 <code>/etc/nginx/conf.d</code>，新建 <code>hello-hugo.conf</code> 文件，内容如下，端口号和路径可以根据实际情况进行修改，保证没有被占用：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-nginx" data-lang="nginx"><span class="line"><span class="cl"><span class="k">server</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kn">listen</span> <span class="mi">443</span> <span class="s">ssl</span><span class="p">;</span> <span class="c1"># https端口号，默认为443，可以自己修改
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">server_name</span> <span class="s">your.domain</span><span class="p">;</span> <span class="c1"># 域名，与申请证书时候使用的域名要一致
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
</span></span><span class="line"><span class="cl">    <span class="c1"># https相关配置
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">ssl_certificate</span>  <span class="s">cert/your.domain_bundle.crt</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">ssl_certificate_key</span> <span class="s">cert/your.domain.key</span><span class="p">;</span> 
</span></span><span class="line"><span class="cl">    <span class="kn">ssl_session_timeout</span> <span class="mi">5m</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">ssl_ciphers</span> <span class="s">ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">ssl_protocols</span> <span class="s">TLSv1</span> <span class="s">TLSv1.1</span> <span class="s">TLSv1.2</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="kn">ssl_prefer_server_ciphers</span> <span class="no">on</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># 这个路径就是上面我们的git hook指定的路径，再接上一个public
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">root</span> <span class="s">/usr/share/nginx/hello-hugo/public</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># 默认查找路径下的index.html
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">location</span> <span class="s">/</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="kn">index</span> <span class="s">index.html</span> <span class="s">index.htm</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># 默认的404页面
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">error_page</span> <span class="mi">404</span> <span class="s">/404.html</span><span class="p">;</span> 
</span></span><span class="line"><span class="cl">        <span class="kn">location</span> <span class="p">=</span> <span class="s">/40x.html</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">server</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kn">listen</span> <span class="mi">80</span><span class="p">;</span> <span class="c1"># 端口号可以自己修改
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">server_name</span> <span class="s">your.domain</span><span class="p">;</span> <span class="c1"># 域名，与申请证书时候使用的域名要一致
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>
</span></span><span class="line"><span class="cl">    <span class="c1"># 将http重定向到https，host后面的端口号与上一个server的端口号保持一致即可
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="kn">return</span> <span class="mi">301</span> <span class="s">https://</span><span class="nv">$host:443$request_uri</span><span class="p">;</span>  
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>最后，开启 nginx：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">nginx
</span></span></code></pre></td></tr></table>
</div>
</div><p>客户端打开浏览器，输入你的域名（默认 80 端口可以不写，否则必须写），能够成功跳转到 <code>https</code> ，地址栏能够显示小锁（小锁表示网站使用的证书是安全的）就表示已经成功了：</p>
<p><figure><a class="lightgallery" href="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png" title="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png" data-thumbnail="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png">
        <img
            class="lazy"
            src="/svg/loading.min.svg"
            data-src="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png"
            loading="lazy"
            title="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png"
            alt="https://i.loli.net/2021/09/25/vu12beN6YnJIdV5.png" />
    </a><figcaption class="image-caption"></figcaption>
</figure>
</p>
<h2 id="留个坑">留个坑<a hidden class="anchor" aria-hidden="true" href="#留个坑">#</a></h2>
<p>至此，Hugo 从入门部署已经完成了，关于 Hugo 的使用细节没有覆盖到，主要是我自己也才刚开始使用，后续会慢慢积累和整理，争取把记录生活的习惯坚持下去，共勉 😎。</p>


  </div>

  <footer class="post-footer">
    <ul class="post-tags">
      <li><a href="https://www.liyangjie.cn/tags/hugo/">Hugo</a></li>
    </ul><div id="post-licensing" class="admonition warning">
    <div class="details-summary admonition-title">
        版权声明 <a rel="license" target="_blank" href="https://creativecommons.org/licenses/by/4.0/deed.zh"><i class="fab fa-creative-commons"></i> <i class="fab fa-creative-commons-by"></i></a>
    </div>
    
    <div class="details-content">
        <div class="admonition-content">
            <ul>
                <li>本文作者：SadBird。</li>
                <li>本文链接：https://www.liyangjie.cn/posts/hobby/hello-hugo/。</li>
                <li>许可说明：本站所有文章除特殊声明外，均使用 <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="license" target="_blank"><i class="fab fa-creative-commons"></i> <i class="fab fa-creative-commons-by"></i> CC BY 4.0 </a> 许可协议，转载请注明出处。</li>
            </ul>
        </div>
    </div>
</div>
<nav class="paginav">
  <a class="prev" href="https://www.liyangjie.cn/posts/work/hashmap-source/">
    <span class="title"><i class="fas fa-angle-double-left"></i> Prev Page</span>
    <br>
    <span>HashMap 基础</span>
  </a>
</nav>

  </footer>
<footer class="tc-container" id="comment">
    <div class="tc-title"><p class="c-title">Discussion</p></div>
    <div id="tcomments"></div>
</footer>
<script crossorigin="anonymous" src="/js/twikoo.min.64322d6748f9b8b12dfb029616065f8eeed16467444adde58bab7d98c5733adf.js" integrity="sha256-ZDItZ0j5uLEt&#43;wKWFgZfju7RZGdESt3li6t9mMVzOt8="></script>
<script>
    twikoo.init({
        envId: 'https://twikoo-nu-red.vercel.app/',
        el: '#tcomments',
        region: 'ap-shenzhen', 
        
        lang: 'zh-CN', 
    });
</script>
</article>
    </main>
    
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a><script>
    class Accordion {
        constructor(el) {
            
            this.el = el;
            
            this.summary = el.querySelector('summary');
            
            this.content = el.querySelector('.inner');

            
            this.animation = null;
            
            this.isClosing = false;
            
            this.isExpanding = false;
            
            this.summary.addEventListener('click', (e) => this.onClick(e));
        }

        onClick(e) {
            
            e.preventDefault();
            
            this.el.style.overflow = 'hidden';
            
            if (this.isClosing || !this.el.open) {
            this.open();
            
            } else if (this.isExpanding || this.el.open) {
            this.shrink();
            }
        }

        shrink() {
            
            this.isClosing = true;
            
            
            const startHeight = `${this.el.offsetHeight}px`;
            
            const endHeight = `${this.summary.offsetHeight}px`;
            
            
            if (this.animation) {
            
            this.animation.cancel();
            }
            
            
            this.animation = this.el.animate({
            
            height: [startHeight, endHeight]
            }, {
            duration: 400,
            easing: 'ease-out'
            });
            
            
            this.animation.onfinish = () => this.onAnimationFinish(false);
            
            this.animation.oncancel = () => this.isClosing = false;
        }

        open() {
            
            this.el.style.height = `${this.el.offsetHeight}px`;
            
            this.el.open = true;
            
            window.requestAnimationFrame(() => this.expand());
        }

        expand() {
            
            this.isExpanding = true;
            
            const startHeight = `${this.el.offsetHeight}px`;
            
            const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
            
            
            if (this.animation) {
            
            this.animation.cancel();
            }
            
            
            this.animation = this.el.animate({
            
            height: [startHeight, endHeight]
            }, {
            duration: 400,
            easing: 'ease-out'
            });
            
            this.animation.onfinish = () => this.onAnimationFinish(true);
            
            this.animation.oncancel = () => this.isExpanding = false;
        }

        onAnimationFinish(open) {
            
            this.el.open = open;
            
            this.animation = null;
            
            this.isClosing = false;
            this.isExpanding = false;
            
            this.el.style.height = this.el.style.overflow = '';
        }
    }

    document.querySelectorAll('.toc details').forEach((el) => {
        new Accordion(el);
    });
</script>
<a href="#comment" aria-label="go to bottom comment" title="Go to Bottom Comment (Alt + B)" class="top-link bottom-comment" id="bottom-comment" accesskey="b" style="visibility: visible; opacity: 1;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.338 29.338" fill="currentcolor">
        <path d="M27.184,1.605H2.156C0.967,1.605,0,2.572,0,3.76v17.572c0,1.188,0.967,2.155,2.156,2.155h13.543
		l5.057,3.777c0.414,0.31,0.842,0.468,1.268,0.468c0.789,0,1.639-0.602,1.637-1.923v-2.322h3.523c1.188,0,2.154-0.967,2.154-2.155
		V3.76C29.338,2.572,28.371,1.605,27.184,1.605z M27.34,21.332c0,0.085-0.068,0.155-0.154,0.155h-5.523v3.955l-5.297-3.956H2.156
		c-0.086,0-0.154-0.07-0.154-0.155V3.759c0-0.085,0.068-0.155,0.154-0.155v0.001h25.029c0.086,0,0.154,0.07,0.154,0.155
		L27.34,21.332L27.34,21.332z M5.505,10.792h4.334v4.333H5.505C5.505,15.125,5.505,10.792,5.505,10.792z M12.505,10.792h4.334v4.333
		h-4.334V10.792z M19.505,10.792h4.334v4.333h-4.334V10.792z"/>
    </svg>
</a>

<script>
    let comment = document.getElementById("comment");
    let bottomToComment = document.getElementById("bottom-comment")
    
    document.addEventListener('scroll',function () {
        const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
        const offsetTop = comment.offsetTop
        const scrollTop = document.documentElement.scrollTop
        const top = offsetTop - scrollTop
        if (top <= viewPortHeight + 100) {
            bottomToComment.style.visibility = "hidden";
            bottomToComment.style.opacity = "0";
        } else {
            bottomToComment.style.visibility = "visible";
            bottomToComment.style.opacity = "1";
        }
    })
</script><footer class="footer">
    <span>&copy; 2022 <a href="https://www.liyangjie.cn/">染竹君的个人博客</a></span>
    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
    </span>
    
</footer>

<script crossorigin="anonymous" src="/js/intersection-observer.min.c0ff09623e9f209a66c6130004e0422e1385fd8e8f8baaa14246a49c19827c68.js" integrity="sha256-wP8JYj6fIJpmxhMABOBCLhOF/Y6Pi6qhQkaknBmCfGg="></script>
<script crossorigin="anonymous" src="/js/lazyload.min.min.53e82bf9e8c145b953635b17fa3911ab6f3a8f1e4d37969aeb39d829d30fa6e9.js" integrity="sha256-U&#43;gr&#43;ejBRblTY1sX&#43;jkRq286jx5NN5aa6znYKdMPpuk="></script>


<script crossorigin="anonymous" src="/js/lightgallery.min.5d1410b8c831852c6c62b2dfad75f4e0f046a13e1826f97cd7a742523fab608c.js" integrity="sha256-XRQQuMgxhSxsYrLfrXX04PBGoT4YJvl816dCUj&#43;rYIw="></script>
<script crossorigin="anonymous" src="/js/lg-thumbnail.min.afa3995936244c14f68b85b13d657c368dc787cbcea863179950ac494dab6117.js" integrity="sha256-r6OZWTYkTBT2i4WxPWV8No3Hh8vOqGMXmVCsSU2rYRc="></script>
<script crossorigin="anonymous" src="/js/lg-zoom.min.a47b38d6f7138dce5f712f77780f339b5ec26af3bcd44950bcf736754ec88ed4.js" integrity="sha256-pHs41vcTjc5fcS93eA8zm17CavO81ElQvPc2dU7IjtQ="></script>
<script>
    const lazyLoadInstance = new LazyLoad({
        
    }); 
    
    const config = {
        selector: ".lightgallery",
        mode: "lg-slide",
        plugins: [lgZoom, lgThumbnail],
        speed: 400,
        hideBarsDelay: 2000,
        mousewheel: true,
        thumbnail: true,
        exThumbImage: "data-thumbnail",
        thumbWidth: 80,
        thumbContHeight: 80,
        mobileSettings: { controls: true, showCloseIcon: true, download: true, },
        licenseKey: "28AC9E09-3D8C45D8-8D6124E0-8FF74FF3", 
    };

    lightGallery(document.getElementsByClassName('post-content')[0], config);
</script>
<script>
    let details = document.getElementsByClassName('details')
    details = details || [];
    for (let i = 0; i < details.length; i++) {
        let element = details[i]
        const summary = element.getElementsByClassName('details-summary')[0];
        if (summary) {
            summary.addEventListener('click', () => {
                element.classList.toggle('open');
            }, false);
        }
    }
</script>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        processEscapes: true
      }
    });
</script>

<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script></body>

</html>